<template>
	<view class="signature">
		<uv-navbar title="完结签字" placeholder bg-color="transparent" auto-back left-icon-color="#757575"
			title-style="color: #000000; font-size: 32rpx" />
		<view class="signature-content">
			<uv-text text="备注信息" size="28rpx" color="#212121" margin="0 0 20rpx 0" />
			<uv-textarea v-model="remark" height="200rpx" placeholder="请输入备注信息" />
			<uv-text text="电子签名" size="28rpx" color="#212121" margin="20rpx 0" />
			<view v-if="generateSignUrl" class="sign-img">
				<image :src="webSrc(generateSignUrl)" />
				<uv-icon class="sign-del" name="trash" size="40rpx" color="#F00" @click="delSign" />
			</view>
			<view v-else class="sign-btn" @click="openSign">点击签名</view>
			<uv-text text="选择签章" size="28rpx" color="#212121" margin="20rpx 0" />
			<view v-if="stampUrl" class="sign-img">
				<image :src="webSrc(stampUrl)" />
				<uv-icon class="sign-del" name="trash" size="40rpx" color="#F00" @click="delSealSign" />
			</view>
			<view v-else class="sign-btn" @click="openSealSign">选择签章</view>
			<view class="sign-footer">
				<g-sign-btn near label="保存" :show-time="false" :show-tips="false"
					:disabled="!generateSignUrl || !stampUrl" @confirm="handleSubmit" />
			</view>
		</view>
		<uv-overlay :show="signShow" zIndex="99">
			<view>
				<uv-status-bar />
				<scroll-view scroll-x scroll-with-animation :scroll-into-view="'sign-' + active" class="sign-list">
					<view class="sign-item" :id="`sign-${k}`" v-for="(i, k) in signList" :key="k"
						:class="{ active: k == active }" @click="chooseSign(k)">
						<image :src="webSrc(i.signUrl)" />
					</view>
				</scroll-view>
				<view class="sign-body">
					<g-signature v-if="signShow" ref="signatureRef" @getImg="getSignImage" />
				</view>
				<view class="sign-button confrim" @click="signatureRef.save()">确定</view>
				<view class="sign-button" @click="cancel">取消</view>
			</view>
		</uv-overlay>
		<uv-popup ref="sealRef" zIndex="99">
			<view>
				<scroll-view v-if="sealList.length > 0" scroll-x scroll-with-animation
					:scroll-into-view="'seal-sign-' + sealActive" class="seal-sign-list">
					<view class="seal-sign-item" :id="`seal-sign-${k}`" v-for="(i, k) in sealList" :key="k"
						:class="{ active: k == sealActive }" @click="chooseSealSign(k)">
						<image :src="webSrc(i.signUrl)" />
					</view>
				</scroll-view>
				<view v-else class="seal-sign-list">
					<uv-empty :icon="empty" text="暂无签章，请前往管理系统添加签章" margin-top="100rpx" />
				</view>
			</view>
		</uv-popup>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		webSrc
	} from "@/common/mothed.js";
	import {
		commonUpload
	} from "@/request/common.js";
	import {
		getSignData,
		reportReview
	} from "@/request/task.js";
	import empty from "@/static/empty.png";

	const signShow = ref(false); // 签名弹窗
	const signList = ref([]); // 签名列表
	const sealList = ref([]); // 印章列表
	const active = ref(-1); // 签名列表选中项
	const sealActive = ref(-1); // 印章列表选中项
	const signatureRef = ref(); // 签名组件ref
	const sealRef = ref(); // 签章弹窗ref
	const stampUrl = ref(""); // 签章图片
	const reportId = ref(""); // 报告id
	const remark = ref(""); // 备注
	const generateSignUrl = ref(""); // 签名url
	const submitting = ref(false); // 提交中

	onLoad((e) => {
		reportId.value = e.id;
		getSignList();
	});

	// 获取签名列表
	const getSignList = () => {
		getSignData({
			type: 1,
			pageNum: 1,
			pageSize: 100
		}).then((res) => {
			if (res.code == 200) {
				signList.value = res.rows;
			}
		});
	};

	// 选择签名
	const chooseSign = (k) => {
		active.value = k;
		generateSignUrl.value = signList.value[k].signUrl;
		signShow.value = false;
	};

	// 选择印章
	const chooseSealSign = (k) => {
		sealActive.value = k;
		stampUrl.value = sealList.value[k].signUrl;
		sealRef.value.close();
	};

	// 打开签名弹窗
	const openSign = () => {
		signShow.value = true;
	};

	// 打开印章弹窗
	const openSealSign = () => {
		getSignData({
			type: 2, // 1:签名 2:印章
			pageNum: 1,
			pageSize: 100,
		}).then((res) => {
			if (res.code == 200) {
				sealList.value = res.rows;
				sealRef.value.open();
			}
		});
	};

	// 获取签名图片
	const getSignImage = (base64) => {
		uni.getImageInfo({
			src: base64,
			success: (image) => {
				commonUpload(image.path).then((res) => {
					if (res.code == 200) {
						generateSignUrl.value = res.fileName;
						signatureRef.value.clear();
						signShow.value = false;
					}
				});
			},
		});
	};

	// 关闭签名弹窗
	const cancel = () => {
		signShow.value = false;
	};

	// 删除签名
	const delSign = () => {
		active.value = -1;
		generateSignUrl.value = "";
	};

	// 删除印章
	const delSealSign = () => {
		sealActive.value = -1;
		stampUrl.value = "";
	};

	// 提交
	const handleSubmit = async () => {
		if (submitting.value) return;
		submitting.value = true;
		let res = await reportReview({
			id: reportId.value,
			status: 5,
			reasonForRefusal: remark.value,
			signUrl: generateSignUrl.value,
			stampUrl: stampUrl.value,
		});
		if (res.code == 200) {
			uni.showToast({
				title: "提交成功",
				icon: "none",
				success: () => {
					uni.$emit("report");
					setTimeout(() => {
						submitting.value = false;
						uni.navigateBack({
							delta: 1,
						});
					}, 1000);
				},
			});
		}
	};
</script>
<style lang="scss" scoped>
	.signature {
		width: 100%;
		height: 100vh;
		padding: 40rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #ffffff 0%, #50bc7a 100%);

		.signature-content {
			position: relative;
			width: 100%;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			height: calc(100vh - 44px - var(--status-bar-height) - 80rpx);
			background: linear-gradient(180deg, #ace1b5 0%, #fbfbfb 9%, #fbfbfb 100%);
			box-shadow: 0 0 40rpx 4rpx rgba(78, 167, 112, 0.16);
			border-radius: 40rpx;

			.sign-btn {
				color: #757575;
				font-size: 28rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2rpx solid #dcdfe6;
				border-radius: 8rpx;
			}

			.sign-img {
				height: 230rpx;
				border-radius: 8rpx;
				border: 2rpx solid #dcdfe6;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.sign-del {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
				}
			}

			.sign-footer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
			}
		}
	}

	.sign-list {
		margin: 40rpx;
		width: 670rpx;
		height: 166rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		white-space: nowrap;

		.sign-item {
			height: 120rpx;
			width: 200rpx;
			display: inline-block;
			margin: 0 10rpx;
			border: 4rpx solid transparent;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.active {
			border: 4rpx solid #5fc785;
		}
	}

	.seal-sign-list {
		width: 670rpx;
		height: 546rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		white-space: nowrap;

		.seal-sign-item {
			height: 500rpx;
			width: 630rpx;
			display: inline-block;
			margin: 0 10rpx;
			border: 4rpx solid transparent;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.active {
			border: 4rpx solid #5fc785;
		}
	}

	.sign-body {
		height: calc(100vh - 44px - var(--status-bar-height) - 508rpx);
		background-color: #fff;
		margin: 0 40rpx;
	}

	.sign-button {
		margin: 40rpx;
		height: 94rpx;
		background: #ffffff;
		box-shadow: 0 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
		border-radius: 12rpx;
		color: #999999;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: #f5f5f5;
		}
	}

	.confrim {
		color: #fff;
		background-color: #4ea770;

		&:active {
			background-color: #5bb67c;
		}
	}
</style>